<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('distributedEnter.scanRecord')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
			<view class="record-card" v-for="(item, index) in data.barcodeList" :key="`${item.barcode}` + `${index}`">
				<uni-icons class="close-icons" type="closeempty" color="#9C9C9C" size="30"
					@click="handelClosePopup(index, item)"></uni-icons>
				<view class="card-mini-head">
					<view class="title-line"></view>
					<text>{{ $t('translationImage.serialNumber') }}：{{ data.barcodeList.length - index }}</text><text style="margin-left: 10px" class="gui-badge demo gui-bg-red gui-color-white" v-if="item.barcodeStatus!='inStock'">
          {{ $t('warehousing.out') }}</text>
				</view>
				<view class="custom-card-itemOne">
					<text class="item-info-title">{{ $t('distributedOut.barcode') }}：</text>{{ item.barcode }}
				</view>
				<view class="custom-card-itemOne">
					<text class="item-info-title">{{ $t('distributedEnter.materialCode') }}：</text> {{ item.materialCode }}
				</view>
				<view class="custom-card-itemOne">
					<text class="item-info-title">{{ $t('distributedEnter.materialName') }}：</text>{{ item.materialName }}
				</view>
				<view class="custom-card-itemOne">
					<text class="item-info-title">{{ $t('distributedEnter.materialSpec') }}：</text>{{ item.materialSpec || ''
					}}
				</view>
				<view class="custom-card-itemOne">
					<text class="item-info-title">{{ $t('distributedEnter.uom') }}：</text>{{ item.unit }}
				</view>
				<view class="custom-card-itemOne">
					<text class="item-info-title">{{ $t('distributedEnter.qty') }}：</text>{{ item.currentQty }}
				</view>
				<!-- <view class="custom-card-itemOne gui-flex gui-justify-content-end">
					<view class="print-class" >{{ item.barcodeStatus }}</view>
				</view> -->
			</view>
		</template>
	</gui-page>
</template>

<script setup>
import { useStore } from "vuex";
import { basPdaOperationLogFn } from '@/utils/index.js';
import { OPERATION_DEL, OPERATION_LOOK } from '@/constant/index.js'
import { getBarcodeStatus } from '@/api/api.js'
import {
	computed,
	reactive,
	onMounted
} from 'vue';
onMounted(() => {
	try {
		let inputParameter = '无'
		let returnParameter = JSON.stringify(data.barcodeList)
		let operationPicture = '销售出库'
		let callInterface = '无'
		let opertionParmes = {
			inputParameter,
			returnParameter,
			operationPicture,
			callInterface,
			responseCode: '无',//返回状态
			errorMessage: '无',//错误信息
			isPass: 'Y',//是否成功 Y N
			operationType: OPERATION_LOOK
		}
		basPdaOperationLogFn(opertionParmes)
	} catch (error) {
	}

	// 状态
	getBarcodeStatus(data.barcodeList).then(res=>{
		console.log(res)
		let arr=res.data;
		data.barcodeList.forEach(itme=>{
			arr.forEach(a=>{
				if(a.barcode==itme.barcode){
					itme.barcodeStatus=a.barcodeStatus
				}
			})
		})
	})
})
let data = reactive({
	barcodeList: [],
})
let store = useStore();
// fqc扫描条码
data.barcodeList = computed(() => {
	return store.state.stockRemovalList
})
const handelClosePopup = (index, item) => {
	try {
		let inputParameter = JSON.stringify(item)
		let returnParameter = '无'
		let operationPicture = '销售出库'
		let callInterface = '无'
		let opertionParmes = {
			inputParameter,
			returnParameter,
			operationPicture,
			callInterface,
			responseCode: '无',//返回状态
			errorMessage: '无',//错误信息
			isPass: 'Y',//是否成功 Y N
			operationType: OPERATION_DEL
		}
		basPdaOperationLogFn(opertionParmes)
	} catch (error) {
	}
	store.commit('deleteStockRemovalList', index)
}
</script>

<style lang="scss" scoped>
.print-class {
	display: inline-block;
	padding: 10rpx 20rpx;
	background-color: chartreuse;
	color: #fff;
	border-radius: 8rpx;
	background: $uni-color-teal;
}
</style>>
